<template>
  <Modal v-model:visible="isShow" :title="title" :showClose="true" @close="">
    <div class="popup_body">
      <div class="invitation_container">
        <div class="link_text">
          <span>邀请链接</span>
          <span>邀请好友成功奖888金币</span>
        </div>
        <div class="link_section">
          <div class="invite_link">https://xxx.com/?invite=1131123sdfghjkjlsdgfdhfjhkjlkj;lk'asdfghlj;ketsydtufyiuoiowertuytiuyoupsydug</div>
          
          <iconpark-icon @click="click_copy" class="copy_button" icon-id="copy" size="1.2rem"></iconpark-icon>
        </div>
        <div class="app_icons">
          <div
            v-for="app in apps"
            :key="app.name"
            class="app_icon"
            :style="{ backgroundImage: `url(${app.icon})`, backgroundSize: 'cover' }"
            @click="openApp(app.url)"
          ></div>
        </div>
      </div>
    </div>
  </Modal>

</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useI18n } from "vue-i18n";
const { t } = useI18n();

import { copyFn } from "@/utils/publicMethods.ts";
import { showToast } from "@nutui/nutui";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  close: {
    type: Function,
    required: true,
  },
});


const emit = defineEmits(['update:visible', 'close']);

const title = ref('邀请好友加入俱乐部');
const apps = ref([
  { name: 'Facebook', icon: '/imgs/club/ins.png', url: 'fb://profile' },
  { name: 'Telegram', icon: '/imgs/club/ins.png', url: 'tg://resolve' },
  { name: 'Zalo', icon: '/imgs/club/ins.png', url: 'zalo://app' },
  { name: 'Instagram', icon: '/imgs/club/ins.png', url: 'instagram://app' },
])

const isShow = computed({
  get: function () {
    return props.visible;
  },
  set: function (value: any) {
    emit('update:visible', value);
    emit('close');
  },
});


// 点击复制
const click_copy = () => {
  // if () {
    copyFn('https://xxx.com/?invite=1131123')
    showToast.text(t("copy_success"))
  // }
}

const openApp = (url: string) => {
  window.location.href = url;
};

</script>

<style scoped>
.popup_body {
  padding: 20px;
  .invitation_container {
    text-align: center;
    /* padding: 20px; */
    border-radius: 8px;
    color: #fff;
    .link_text {
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        color: #C6C4F5;
        font-size: 12px;
        font-weight: 300;
      }
    }

    .link_section {
      margin-bottom: 20px;
      position: relative;
      border-radius: 8px;
      background: #1D1C3C;
      box-shadow: 0.5px 0.5px 1px 0px #333260 inset;

      .invite_link {
        display: block;
        color: #fff;
        text-decoration: none;
        margin: 10px 0 24px;
        width: 90%;
        height: 48px;
        line-height: 48px;
        text-align: left;
        padding: 0px 14px;
        font-size: 14px;
        font-weight: 400;
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .copy_button {
        position: absolute;
        right: 10px;
        top: 14px;
        z-index: 99;
      }
    }

    .app_icons {
      display: flex;
      justify-content: center;
      gap: 20px;

      .app_icon {
        width: 50px;
        height: 50px;
        border-radius: 8px;
      }
    }
  }
}
</style>
